<template>
	<view class="box">
		<view class="top">
			<!-- 头像1-->
			<view class="head f-w" v-if="token">

				<view class="head-img">
					<image :src="userinfo.avatar" mode=""></image>
				</view>
				<view class="name">{{userinfo.nickname}}</view>
				<view class="plus" @click="goPlus" style="position: relative;">
					<image :src="userinfo.user_grade.pic" mode="widthFix"
						v-if="userinfo.UserGradeState&&userinfo.UserGradeState.IsOverdue==1"></image>
					<!-- <image src="https://jw.xzsw2021.com/static/user/icon_161@2x.png" mode="widthFix"
						v-if="userinfo.UserGradeState&&userinfo.UserGradeState.IsOverdue==1"></image> -->
					<!-- <image src="https://jw.xzsw2021.com/static/user/icon_160@2x.png" mode="widthFix" v-else></image> -->
					<view class="endtadae" v-if="userinfo.UserGradeState && userinfo.UserGradeState.IsOverdue==1"
						style="font-size: 23rpx;">
						<view style="white-space: nowrap;" class="" v-if="userinfo.UserGradeState.end_data">
							{{userinfo.UserGradeState.end_data.slice(0,10)}}到期
						</view>
					</view>
				</view>

			</view>

			<view class="head f-w" v-else>
				<view class="head-img">
					<image src="https://jw.xzsw2021.com/static/index/icon_53@2x.png" mode=""></image>
				</view>
				<view class="name" @click="gologin">点击登录</view>
			</view>
			<!-- 数据 -->
			<view class="num fw-bt">
				<view class="num2" @click="goNum(0)">
					<view class="f36 bold tr">{{userinfo.total_coupon}}</view>
					<view class="f22">优惠券</view>
				</view>
				<view class="num2" @click="goNum(1)">
					<view class="f36 bold tr">{{userinfo.total_gift}}</view>
					<view class="f22">礼品卡</view>
				</view>
				<view class="num2" @click="goNum(2)">
					<view class="f36 bold tr">{{userinfo.total_red_packet}}</view>
					<view class="f22">我的红包</view>
				</view>
				<view class="num2" @click="goNum(3)">
					<view class="f36 bold tr">{{userinfo.integral || 0}}</view>
					<view class="f22">我的积分</view>
				</view>
			</view>


			<!-- 会员 -->
			<view class="member">
				<view class="member-bg" @click="goPlus">
					<image src="https://jw.xzsw2021.com/static/user/ka@2x.png" mode=""
						v-if="userinfo.UserGradeState&&userinfo.UserGradeState.IsOverdue==1"></image>
					<image src="https://jw.xzsw2021.com/static/user/icon_160@2(1).png" mode="" v-else></image>
				</view>
			</view>
		</view>
		<!-- 我的订单 -->
		<view class="order card">
			<view class="title fw-bt">
				<view class="f32 bold c333">我的订单</view>
				<view class="right f-w" @click="goOrder(10)">
					<view class="c666 f26">查看全部</view>
					<view class="right-img f-w">
						<image src="https://jw.xzsw2021.com/static/client/icon_56@2x.png" mode=""></image>
					</view>
				</view>
			</view>
			<!--  -->
			<view class="order-demo fw-bt">
				<view v-for="(item,index) of order_title" :key="index" @click="goOrder(index)">
					<view class="order-img f-w">
						<image :src="item.img" mode=""></image>
					</view>
					<view>{{item.name}}</view>
				</view>
			</view>
		</view>
		<!-- 我的余额 -->
		<view class="balance card">
			<view class="title fw-bt">
				<view class="f32 bold c333">我的余额</view>
				<view class="right fun" @click="goBalanceCz">
					余额充值 >
				</view>
			</view>
			<view class="balance-num fw-bt" @click="goBalanceMx">
				<view class="bold">{{userinfo.now_money || '0'}}</view>
				<view class="fun">余额明细 ></view>
			</view>
		</view>
		<!-- 活动福利 -->
		<view class="fuli card">
			<view class="title fw-bt">
				<view class="f32 bold c333">活动福利</view>
			</view>
			<view class="fuli-demo f-w">
				<view v-for="(item,index) of fuli_list" :key="index" @click="goFuli(index)">
					<view class="fuli-img f-w" :style="index==3?'width:50rpx;height:50rpx':''">
						<image :src="item.img" mode="" :style="index==3?'width:50rpx;height:50rpx':''"></image>
					</view>
					<view class="fuli-name ">{{item.name}}</view>
				</view>
			</view>
		</view>
		<!-- 其他工具 -->
		<view class="other card">
			<view class="title fw-bt">
				<view class="f32 bold c333">其他工具</view>
			</view>
			<view class="other-demo f-w">
				<view v-for="(item,index) of other_list" :key="index" @click="goOther(index)">
					<view class="other-img f-w">
						<image :src="item.img" mode=""></image>
					</view>
					<view class="other-name ">{{item.name}}</view>
				</view>
				<view
					style="width: 88rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;"
					v-if="userinfo.role_id==1 || userinfo.role_id == 3" @click="apply(2)">
					<view class="other-img f-w">
						<image src="https://jw.xzsw2021.com/static/user/icon_182@2x.png" mode=""></image>
					</view>
					<view class="other-name "><text style="white-space: nowrap;">申请成为买手</text></view>
				</view>
				<view
					style="width: 88rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;"
					v-if="userinfo.role_id==1 || userinfo.role_id == 2" @click="apply(3)">
					<view class="other-img f-w">
						<image src="https://jw.xzsw2021.com/static/user/icon_183@2x.png" mode=""></image>
					</view>
					<view class="other-name "><text style="white-space: nowrap;">申请成为骑手</text></view>
				</view>
			</view>
		</view>
		<!-- 其他入口 -->
		<view class="other card" v-if="other_list3.length">
			<view class="title fw-bt">
				<view class="f32 bold c333">其他入口</view>
			</view>
			<view class="other-demo f-w">

				<view v-for="(item,index) of other_list3" :key="index" @click="gorider(item.url)">
					<view class="other-img f-w">
						<image :src="item.img" mode=""></image>
					</view>
					<view class="other-name ">{{item.name}}</view>
				</view>

				<view @click="gobuyer" v-if="userinfo.role_id==2 || userinfo.role_id==4">
					<view class="other-img f-w">
						<image src="https://jw.xzsw2021.com/static/user/icon_182@2x.png" mode=""></image>
					</view>
					<view class="other-name ">买手端</view>
				</view>

				<view @click="gotobuyer" v-if="userinfo.role_id==3 || userinfo.role_id==4">
					<view class="other-img f-w">
						<image src="https://jw.xzsw2021.com/static/user/icon_183@2x.png" mode=""></image>
					</view>
					<view class="other-name ">骑手端</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import Cache from '@/util/cache.js'
	import {
		getMarketServiceApi,
		homeApi
	} from '@/api/market.js'
	export default {
		data() {
			return {
				token: '',
				users: {
					type: 5, //0.普通用户 1.商家 2.客服 3.买手 4.骑手 5.全能
				}, //用户信息
				userinfo: '',
				order_title: [{
						img: 'https://jw.xzsw2021.com/static/user/icon_163@2x.png',
						name: '待支付'
					},
					{
						img: 'https://jw.xzsw2021.com/static/user/icon_164@2x.png',
						name: '待配送'
					},
					{
						img: 'https://jw.xzsw2021.com/static/user/icon_165@2x.png',
						name: '配送中'
					},
					{
						img: 'https://jw.xzsw2021.com/static/user/icon_166@2x.png',
						name: '已完成'
					},
					{
						img: 'https://jw.xzsw2021.com/static/user/icon_167@2x.png',
						name: '售后'
					}
				],
				fuli_list: [{
						img: 'https://jw.xzsw2021.com/static/user/icon_168@2x.png',
						name: '满汉全席'
					},
					{
						img: 'https://jw.xzsw2021.com/static/user/icon_169@2x.png',
						name: '拼团'
					},
					{
						img: 'https://jw.xzsw2021.com/static/user/icon_170@2x.png',
						name: '秒杀'
					},
					{
						img: '/static/img/icon_0002.png',
						name: '邀请'
					}
				],
				other_list: [{
						img: 'https://jw.xzsw2021.com/static/user/icon_171@2x.png',
						name: '粉丝群'
					},
					{
						img: 'https://jw.xzsw2021.com/static/user/icon_172@2x.png',
						name: '我的地址'
					},
					{
						img: 'https://jw.xzsw2021.com/static/user/icon_173@2x.png',
						name: '联系我们'
					},
					{
						img: 'https://jw.xzsw2021.com/static/user/icon_174@2x.png',
						name: '关于我们'
					},
					{
						img: 'https://jw.xzsw2021.com/static/user/icon_175@2x.png',
						name: '服务协议'
					},
					{
						img: 'https://jw.xzsw2021.com/static/user/icon_176@2x.png',
						name: '用户协议'
					},
					{
						img: 'https://jw.xzsw2021.com/static/user/icon_177@2x.png',
						name: '隐私协议'
					},
					{
						img: 'https://jw.xzsw2021.com/static/user/icon_178@2x.png',
						name: '我的收藏'
					},
					{
						img: 'https://jw.xzsw2021.com/static/user/icon_179@2x.png',
						name: '美食官'
					},
					{
						img: 'https://jw.xzsw2021.com/static/user/icon_171@2x.png',
						name: '退出登录'
					},
				],
				other_list2: [{
						img: 'https://jw.xzsw2021.com/static/user/icon_180@2x.png',
						name: '商家端',
						url: "/P_merchant/login/login"
					},
					{
						img: 'https://jw.xzsw2021.com/static/user/icon_181@2x.png',
						name: '客服端',
						url: "/P_service/login/login"
					}
				]
			}
		},
		computed: {
			other_list3() { //其他入口进入条件
				let type = this.users.type;
				let arr = [];
				if (type == 1) {
					arr = this.other_list2.slice(0, 1)
					console.log(arr);
				} else if (type == 2) {
					arr = this.other_list2.slice(1, 2)
				} else if (type == 3) {
					arr = this.other_list2.slice(2, 3)
				} else if (type == 4) {
					arr = this.other_list2.slice(3, 4)
				} else if (type == 5) {
					arr = this.other_list2.slice()
				} else {

				}
				return arr
			},
		},
		onShow() {
			if (uni.getStorageSync('token')) {
				this.token = uni.getStorageSync('token') //?
				this.getuserinfo()
			} else {
				this.token =''
				this.userinfo = ''
			}
			console.log(this.userinfo,'//////////')
		},
		methods: {
			// 前往买手
			gobuyer() {
				uni.requestSubscribeMessage({
					tmplIds: ['bghGA6MsuUGH501T76hy6uCgpc6lHbBKLRw0xcEJiTk'],
					success(res) {
						uni.reLaunch({
							url: '/P_buyer/order_center/index'
						})
					},
					fail(err) {
						uni.reLaunch({
							url: '/P_buyer/order_center/index'
						})
					}
				})
			},
			// 前往骑手
			gotobuyer() {
				uni.requestSubscribeMessage({
					tmplIds: ['W6IpySLnyYm6SNAuytP0B8EFABj4PfHKmECRbHh2UpY'],
					success(res) {
						uni.reLaunch({
							url: '/P_rider/order_center/index'
						})
					},
					fail(err) {
						uni.reLaunch({
							url: '/P_rider/order_center/index'
						})
					}
				})


			},
			// // 企业客服
			// goKefu(){

			// 	wx.openCustomerServiceChat({
			// 	  extInfo: {url:'https://work.weixin.qq.com/kfid/kfc06615ecf3a7cb326'},
			// 	  corpId: 'ww039cffd06bc622cd',
			// 	  success(res) {
			// 		    console.log('成功',res)
			// 	  },
			// 	  fail(err){
			// 		  console.log('失败',err)
			// 	  }
			// 	})
			// },
			// 申请成为maiqi手
			apply(e) {
				// uni.navigateTo({
				// 	url:'/pages/user/distribution/apply?type=1'
				// })
				uni.navigateTo({
					url: '/pages/user/distribution/apply-status/apply-status?type=' + e
				})
			},
			getuserinfo() {
				this.$request('user', {}, 'GET').then(res => {
					uni.setStorageSync('uid', res.data.uid)
					this.userinfo = res.data
					console.log(this.userinfo.role_id)
				})
			},

			gologin() {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			},
			gorider(e) {
				uni.reLaunch({
					url: e
				})
			},
			// plus会员
			goPlus() {
				uni.navigateTo({
					url: '/pages/user/plus/plus'
				})
			},
			// 顶部功能切换
			goNum(index) {
				console.log(index);
				if (index == 0) { //优惠券
					uni.navigateTo({
						url: '/pages/user/mycoupons/mycoupons'
					})
					return false;
				} else if (index == 1) { //礼品卡
					uni.navigateTo({
						url: '/pages/user/mygiftcard/mygiftcard'
					})
					return false;
				} else if (index == 2) { //我的红包
					uni.navigateTo({
						url: '/pages/user/myredbao/myredbao'
					})
					return false;
				} else if (index == 3) { //我的积分
					uni.navigateTo({
						url: '/pages/user/mypoints/mypoints'
					})
					return false;
				}
			},
			// 查看订单
			goOrder(index = 0) {
				console.log('订单', index);
				if (index == 10) { //
					uni.navigateTo({
						url: '/pages/client/order/order?type=0'
					})
					return false;
				} else if (index == 0) {
					uni.navigateTo({
						url: '/pages/client/order/order?type=1'
					})
					return false;
				} else if (index == 1) {
					uni.navigateTo({
						url: '/pages/client/order/order?type=2'
					})
					return false;
				} else if (index == 2) {
					uni.navigateTo({
						url: '/pages/client/order/order?type=3'
					})
					return false;
				} else if (index == 3) {
					uni.navigateTo({
						url: '/pages/client/order/order?type=4'
					})
					return false;
				} else if (index == 4) { //售后

					uni.navigateTo({
						url: '/pages/client/order/order-aftersale/order-aftersale'
					})
					return false;
				}

			},
			// 余额充值
			goBalanceCz() {
				uni.navigateTo({
					url: '/pages/user/balance/balance'
				})
				console.log('去充值');
			},
			// 余额明细
			goBalanceMx() {
				uni.navigateTo({
					url: '/pages/user/balance/balance-detail'
				})
				console.log('查看明细');
			},
			// 活动福利
			goFuli(index) {
				console.log('福利', index);
				if (index == 0) { //满汉全席
					uni.navigateTo({
						url: '/pages/user/banquest/banquest'
					})
					return false;
				} else if (index == 1) { //拼团
					uni.navigateTo({
						url: '/pages/user/spellgroup/spellgroup'
					})
					return false;
				} else if (index == 2) { //秒杀
					// uni.navigateTo({
					// 	url:'/pages/client/order/order?type=2'
					// })
					uni.navigateTo({
						url: '/pages/client/skill/skill?type=2'
					})
					return false;
				} else if (index == 3) { //邀请
					if (this.userinfo.brokerage_level > 0) {
						uni.navigateTo({
							url: '/pages/user/invite/index'
						})
					} else {
						uni.navigateTo({
							url: '/pages/user/invite/invite'
						})
					}



					return false;
				}
			},
			// 其他工具
			goOther(index) {
				console.log('其他工具', index);
				if (index == 0) { //
					console.log('粉丝群');
					uni.navigateTo({
						url: '/pages/user/fans/fans'
					})
					return false;
				} else if (index == 1) {
					console.log('我的地址');
					uni.navigateTo({
						url: '/pages/client/address/address'
					})
					return false;
				} else if (index == 2) {
					homeApi().then(res => {
						uni.makePhoneCall({
							phoneNumber: res.data.sys_phone
						});
					}).catch(err => {

					})
					console.log('我的客服');
					return false;
				} else if (index == 3) {
					console.log('关于我们');
					uni.navigateTo({
						url: '/pages/xieyi/xieyi?type=3'
					})
					return false;
				} else if (index == 4) {
					console.log('服务协议');
					uni.navigateTo({
						url: '/pages/xieyi/xieyi?type=4'
					})
					return false;
				} else if (index == 5) { //
					console.log('用户协议');
					uni.navigateTo({
						url: '/pages/xieyi/xieyi?type=5'
					})
					return false;
				} else if (index == 6) { //
					console.log('隐私协议');
					uni.navigateTo({
						url: '/pages/xieyi/xieyi?type=6'
					})
					return false;
				} else if (index == 7) { //
					console.log('我的收藏');
					uni.navigateTo({
						url: '/pages/user/mycollection/mycollection'
					})
					return false;
				} else if (index == 8) { //分销
					if (this.userinfo.brokerage_level > 1) { //非分销员
						uni.navigateTo({
							url: '/pages/user/distribution/distribution'
						})

					} else {
						let spread_apply = this.userinfo.spread_apply
						if (spread_apply == 0) {
							uni.navigateTo({
								url: '/pages/user/distribution/distr-desc'
							})
						}
						if (spread_apply == 1) {
							uni.navigateTo({
								url: '/pages/user/distribution/apply-status/apply-status?state=0'
							})
						}
						if (spread_apply == 2) {
							uni.navigateTo({
								url: '/pages/user/distribution/distribution'
							})
						}
						if (spread_apply == 3) {
							uni.navigateTo({
								url: '/pages/user/distribution/apply-status/apply-status?state=2'
							})
						}


					}
					return false;
				} else if (index == 9) { //退出登录
					uni.showModal({
						content: '确定要退出登录吗？',
						success(res) {
							if (res.confirm) {
								// uni.clearStorageSync();
								Cache.clear('token')
								uni.navigateTo({
									url: '/pages/login/login'
								})
							}
						}
					})
					return false;
				} else {
					return false;
				}
			},
			// 其他入口
			goOther2(index) {

				console.log('其他入口-根据状态判定', index);
				if (index == 0) { //
					console.log('商家端');
					// uni.navigateTo({
					// 	url:'/pages/user/fans/fans'
					// })
					return false;
				} else if (index == 1) {
					console.log('客服端');
					// uni.navigateTo({
					// 	url:'/pages/client/address/address'
					// })
					return false;
				} else if (index == 2) {
					console.log('买手端');
					return false;
				} else if (index == 3) {
					console.log('骑手端');
					// uni.navigateTo({
					// 	url:'/pages/xieyi/xieyi?type=3'
					// })
					return false;
				} else {
					return false;
				}
			},
		}
	}
</script>
<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style lang="scss">
	.endtadae {
		position: absolute;
		left: 0rpx;
		bottom: -40rpx;
		left: 10rpx;
	}

	.box {
		padding-bottom: 60rpx;

		.title {
			.right-img {
				margin-left: 12rpx;
				width: 12rpx;
				height: 21rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.top {
			position: relative;
			width: 750rpx;
			height: 450rpx;
			padding: 24rpx 30rpx 0;
			background: linear-gradient(180deg, #00A552 0%, #00A552 100%);
			border-radius: 100% 100% 100% 100% / 0% 0% 10% 10%;
			overflow: hidden;
			box-sizing: border-box;
			color: #fff;

			.head {

				font-size: 36rpx;

				.head-img {
					width: 130rpx;
					height: 130rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.name {
					margin: 0 10rpx 0 25rpx;
				}

				.plus {
					min-width: 146rpx;
					height: 43rpx;

					image {
						width: 100%;
						height: 43rpx;
					}
				}
			}

			.num {
				margin-top: 46rpx;

				.f36 {
					margin-bottom: 6rpx;
				}
			}

			.member {
				position: absolute;
				bottom: 0;
				left: 30rpx;
				width: 690rpx;
				height: 120rpx;

				.member-bg {
					width: 690rpx;
					height: 120rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.card {
			margin: 0 auto;
			width: 690rpx;
			padding: 35rpx 28rpx 35rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 16rpx;
		}

		.order {
			margin: 30rpx auto 0;

			.order-demo {
				margin-top: 50rpx;
				padding: 0 10rpx;
				font-size: 24rpx;
				text-align: center;

				&>view {
					width: 72rpx;
				}

				.order-img {
					margin: 0 auto 25rpx;
					width: 62rpx;
					height: 49rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		// 我的余额
		.balance {
			margin: 20rpx auto;
			padding: 35rpx 28rpx 20rpx;

			.balance-num {
				margin-top: 30rpx;
				font-size: 56rpx;
			}

			.fun {
				font-size: 24rpx;
				color: #109C7A;
			}
		}

		// 活动福利

		.fuli {
			margin: 20rpx auto;
			padding: 35rpx 28rpx 0;

			.fuli-demo {
				margin-top: 40rpx;
				flex-wrap: wrap;

				&>view {
					margin: 0 35rpx 35rpx;
					width: 88rpx;
				}

				.fuli-img {
					margin: 0 auto;
					width: 69rpx;
					height: 51rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.fuli-name {
					margin-top: 10rpx;
					font-size: 22rpx;
					color: #666;
					text-align: center;
				}
			}
		}

		// 其他工具
		.other {
			margin: 20rpx auto;

			.other-demo {
				flex-wrap: wrap;
				text-align: center;

				&>view {
					padding: 0 10rpx;
					min-width: 88rpx;
					margin-top: 52rpx;
				}

				&>view:not(:nth-child(4n-3)) {
					margin: 52rpx 0 0 66rpx;
				}

				.other-img {
					margin: 0 auto;
					width: 56rpx;
					height: 50rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.other-name {
					margin-top: 15rpx;
					font-size: 22rpx;
					color: #666;
					text-align: center;
				}
			}
		}

	}
</style>
